import { useEffect } from 'react';
import { registerMicroApps, start } from 'qiankun';
import { useNavigate } from 'react-router-dom';

function Main() {
  useEffect(() => {
    const apps = [
      {
        name: 'vue',
        entry: '//localhost:7101',
        container: '#micro-app',
        activeRule: '/vue',
      },
      {
        name: 'vue3ChildApp',
        entry: '//localhost:8081',
        container: '#micro-app',
        activeRule: '/childvue3',
      }
    ];

    if (document.querySelector('#micro-app')) {
      registerMicroApps(apps);
      start();
    }
    // openChild()
    return function cleanup() {
      // 注销微应用
      // ...
    };

  }, []);
  const navigate = useNavigate()

  const openChild = (event) => {
    navigate('/childvue3');
    // window.history.pushState({}, 'vue', '/vue');
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          onClick={openChild}
        >
          Open Child App
        </a>
        <div id="micro-app"></div>
      </header>
    </div>
  );
}

export default Main;
